<template>
  <el-dialog :visible.sync="dialogVisible" width="60%" append-to-body :close-on-click-modal="false">
    <div class="modeTitle">
      <div class="titleName">站点信息一览</div>
      <div class="line"></div>
    </div>
    <div class="modelContent">
      <div class="leftTab">
        <div :class="currentTab==item.value?'activeTab':'tabItems'" v-for="item in tabsList" :key="item.value"
             @click="tabsChange(item.value)"
        >
          {{ item.label }}
        </div>
      </div>
      <div class="rightMain">
        <map-base-info :map-base-info="baseData" v-if="currentTab=='1'"/>
        <map-operation-data :map-operation-data="baseData" v-if="currentTab=='2'"/>
        <map-alarm-info :map-alarm-info="baseData" v-if="currentTab=='3'"/>
        <map-video :map-video="baseData" v-if="currentTab=='4'"/>
      </div>
    </div>
    <div class="close" @click="dialogVisible=false"></div>
  </el-dialog>
</template>

<script>
import MapBaseInfo from '@/views/home/model/components/MapBaseInfo'
import MapOperationData from '@/views/home/model/components/MapOperationData'
import MapAlarmInfo from '@/views/home/model/components/MapAlarmInfo'
import MapVideo from '@/views/home/model/components/MapVideo'

export default {
  name: 'MapModel',
  components: {
    MapBaseInfo,
    MapOperationData,
    MapAlarmInfo,
    MapVideo
  },
  data() {
    return {
      dialogVisible: false,
      tabsList: [
        { label: '基本信息', value: '1' },
        { label: '运行数据', value: '2' },
        { label: '报警信息', value: '3' },
        { label: '视频', value: '4' }
      ],
      currentTab: '1',
      baseData: {
        address: '',
        enterpriseCode: '',
        enterpriseName: '',
        industryCode: '',
        latitude: '',
        linkman: '',
        longitude: '',
        mobile: '',
        subname: '',
        substationId: ''
      }
    }
  },
  watch: {
    baseData: {
      handler(val) {
        console.log('基础信息', val)
      },
      deep: true
    }
  },
  methods: {
    showModel(data) {
      this.currentTab = '1'
      this.dialogVisible = true
      this.baseData = data
    },
    tabsChange(index) {
      this.currentTab = index
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(res => {
          done()
        })
        .catch(err => {
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  display: none;
}

::v-deep .el-dialog__close {
  color: #e21717 !important;
}

::v-deep .el-dialog {
  background: transparent;
}

::v-deep .el-dialog__body {
  width: 100%;
  height: 640px;
  background: transparent url("../../../assets/images/screen/model/modelBg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.modeTitle {
  position: relative;
  top: -12px;

  .titleName {
    text-align: center;
    font-size: 28px;
    color: #FFFFFF;
  }

  .line {
    width: 100%;
    height: 5px;
    margin-top: 10px;
    background: url("../../../assets/images/screen/model/titleLine.png") no-repeat;
    background-size: 100% 100%;
  }
}

.modelContent {
  width: 100%;
  height: calc(100% - 136px);
  margin-top: 16px;
  padding: 0 22px;
  display: flex;
  justify-content: flex-start;

  .leftTab {
    width: 12%;
    height: 100%;
    margin-right: 16px;

    .tabItems {
      width: 100%;
      height: 35px;
      color: #FFFFFF;
      text-align: center;
      line-height: 35px;
      cursor: pointer;
      background: transparent url("../../../assets/images/screen/model/tabBg.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 30px;
    }

    .activeTab {
      width: 100%;
      height: 35px;
      color: #FFFFFF;
      text-align: center;
      cursor: pointer;
      line-height: 35px;
      background: transparent url("../../../assets/images/screen/model/tabBg1.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 30px;
    }
  }

  .rightMain {
    width: 87%;
    height: 100%;
    padding: 20px;
  }
}

.close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: url("../../../assets/images/screen/model/close.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 35px;
  right: 35px;
}
</style>
